<!DOCTYPE html>
<html ng-app="webapp">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>W7</title>
    <script src="js/angular-1.4.8.min.js"></script>
</head>

<body>
    <div layout="row">
        <div flex="28">
            <a href="#home" class="btn btn-success btn-lg">Home</a>
            <br>
            <a href="#about" class="btn btn-danger btn-lg">About</a>
        </div>
        <div flex="71" class="view-animate-container" ng-controller="myCtrl">
            <!-- 例1 -->
            <d1></d1>
            <!-- 例2 -->
            <d2>
                <br/>
                <span>原始的内容，</span>
                <br/>
                <span>还会在这里。</span>
                <div>
                    HHHHH
                </div>
            </d2>
            <!-- 例3 -->
            {{things}}.
            <d3></d3>
            <!-- 例4 -->
            <d4 class='s4' expander-title='title'>
                {{text}}
            </d4>

            <!-- 例5 -->
            <d5>
                <d5Content class='s4' ng-repeat='iteam in arrs' d5-title='iteam.title'>
                    {{iteam.text}}
                </d5Content>
            </d5>

            <!-- 例6 -->
            <input type="text" name="" value="" placeholder="输入吧!" ng-model="s6">
            <d6 water="{{s6}}">
            </d6>

        </div>
    </div>
</body>

</html>

<script type="text/javascript">
var app = angular.module('webapp', []);
app.controller('myCtrl', ['$scope', function($scope) {
    $scope.ww = "我是水";
    $scope.things = [1, 2, 3, 4, 5, 6];
    $scope.title = '点击展开';
    $scope.text = '这里是内部的内容。';

    $scope.arrs = [{
        title : 'Click me to expand',
        text : 'Hi there folks, I am the content that was hidden but is now shown.'
    }, {
        title : 'Click this',
        text : 'I am even better text than you have seen previously'
    }, {
        title : 'Test',
        text : 'test'
    }];

}]);

app.directive('d1', function() {
    return {
        restrict: 'E',
        template: '<div>Hello directive</div>',
        replace: true
    };
});

app.directive('d2', function() {
    return {
        restrict: 'E',
        template: '<div>directive Include <span ng-transclude></span></div>',
        transclude: true
    };
});

app.directive('d3', function() {
    return {
        restrict: 'E',
        template: '<span>Hi there</span>',
        replace: true
    };
});

app.directive('d4', function() {
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        scope: {
            title: '=expanderTitle'
        },
        template: '<div>' + '<div class="title" ng-click="toggle()">{{title}}</div>' + '<div class="body" ng-show="showMe" ng-transclude></div>' + '</div>',
        link: function(scope, element, attrs) {
            scope.showMe = false;
            scope.toggle = function () {
                scope.showMe = !scope.showMe;
            }
        }
    }
});

app.directive('d5', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        template : '<div ng-transclude></div>',
        controller : function() {
            var expanders = [];
            this.gotOpened = function(selectedExpander) {
                angular.forEach(expanders, function(expander) {
                    if (selectedExpander != expander) {
                        expander.showMe = false;
                    }
                });
            }
            this.addExpander = function(expander) {
                expanders.push(expander);
            }
        }
    }
});

app.directive('d5Content', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        require : '^?d5',
        scope : {
            title : '=d5Title'
        },
        template : '<div>'
                   + '<div class="title" ng-click="toggle()">{{title}}</div>'
                   + '<div class="body" ng-show="showMe" ng-transclude></div>'
                   + '</div>',
        link : function(scope, element, attrs, accordionController) {
            scope.showMe = false;
            accordionController.addExpander(scope);
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
                accordionController.gotOpened(scope);
            }
        }
    }
});

app.directive("d6", function() {
    return {
        restrict:'AE',
        scope:{
            water:'@'
        },
        template:"<div>{{water}}</div>"
    }
});

</script>
<style type="text/css">
.my-form {    -webkit-transition: all linear 0.5s;    transition: all linear 0.5s;    background: transparent;
}
.my-form.ng-invalid {    background: red;}
.s4 {    border: 1px solid black;    width: 250px;}
.s4>.title {    background-color: black;    color: white;    padding: .1em .3em;    cursor: pointer;}
.s4>.body {    padding: .1em .3em;}


</style>